<template>
	<view class="case-item-wrap">
		<view class="user-wrap u-flex">
			<view class="avatar">
				<u-avatar :src="item.user_id.avatar"></u-avatar>
			</view>
			<view class="nickname-wrap u-m-l-16">
				<view class="nickname">
					{{item.user_id.nickname}}
				</view>
				<view class="time">
					{{ $wanlshop.timeToDate(item.create_time, 'yyyy/mm/dd')}}
				</view>
			</view>
		</view>

		<view class="comment-wrap" v-if="item.remark">
			{{item.remark}}
		</view>

		<view class="location-wrap u-flex" style="color: #B2B2B2;">
			<view class="type-name">{{item.call_id.work_name}}</view>
			<view class="border-vertical u-m-l-14 u-m-r-14"
				style="height: 100%;height:20rpx; width: 2rpx;border: 2rpx solid #B2B2B2"></view>
			<view class="location">{{item.area}}</view>
		</view>



		<view class="image-wrap u-flex u-row-between flex-wrap u-m-t-24" v-if="item.images.length">
			<view class="image-item" v-for="(item, index) in images" :key="index">
				<image :src="$wanlshop.oss(item)" mode="" class="image"></image>
			</view>
			<view class="image-item" v-for="(item, index) in ((3 - item.images.length%3 )%3)" :key="index"
				style="opacity: 0;">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "case-detail",
		data() {
			return {

			};
		},
		props: {
			item: {
				type: Object,
				default () {
					return [];
				}
			},

			showMore: {
				type: Boolean,
				default: false,
			}
		},
		computed: {
			images() {
				if (this.showMore) {
					if (this.item.images.length > 3) {
						return this.item.images.slice(0, 3)
					}
				}
				return this.item.images;
			}
		}
	}
</script>



<style>
	.case-item-wrap {
		background: #ffffff;
		padding: 24rpx 0;
	}

	.image-item {
		width: 33%;
		height: 200rpx;
		border-radius: 4rpx;
		margin: 6rpx 0;
	}

	.image {
		height: 200rpx;
	}

	.nickname {
		height: 40rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.time {
		height: 34rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	.comment-wrap {
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 28rpx;
		color: #3D3D3D;
		line-height: 56rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.location-wrap {
		height: 34rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 24rpx;
		color: #808080;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
</style>